<template>
    <div class="kaipin-my">
        <c-title text="开品广场"></c-title>
        <div class="head">
            <div class="head-box">
                <img :src="member.avatar_image" />
                <div class="head-info">
                    <div class="nick-name">{{ member.nickname }}</div>
                    <div class="pohone">
                        <i class="iconfont icon-zx_map_tel"></i>
                        <span style="color: #fff;">{{ member.mobile }}</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="content" :style="fun.isPc() ? 'width:375px !important' : ''">
            <van-tabs v-model="active" title-active-color="var(--themeBaseColor)" title-inactive-color="#454545"
                line-width="0.9375rem" line-height="0.125rem" @change="tab_click">
                <van-tab :title="'开品次数（' + my_product_count + '）'"></van-tab>
                <van-tab :title="'评论次数（' + my_comment_count + '）'"></van-tab>
            </van-tabs>
            <template v-if="active == 0">
                <div class="input-box">
                    <van-search v-model="keyword" class="my-input" placeholder="请输入开品名称"
                        @search="getData(1, keyword)" />
                </div>
                <div class="select-box">
                    <div class="select" @click="select_handle('select')">{{ open_text }}<i class="iconfont icon-xia"
                            :class="{ 'icon-up': select_flag }"></i>
                        <div class="select-float" v-if="select_flag" >
                            <span v-for="item in open_list" :key="item.stauts" @click.stop="change(item, 'select')"
                                :class="{ 'select-current': item.status == open_status }">{{ item.txt }}</span>
                        </div>
                    </div>
                    <div class="select" @click="select_handle('earnest_money')">{{ earnest_money_txt }}<i
                            class="iconfont icon-xia" :class="{ 'icon-up': earnest_money_flag }"></i>
                        <div class="select-float" v-if="earnest_money_flag">
                            <span v-for="item in earnest_money_list" :key="item.stauts"
                                @click.stop="change(item, 'money')"
                                :class="{ 'select-current': item.status == earnest_money_status }">{{ item.txt }}</span>
                        </div>
                    </div>
                    <div class="select" @click="select_handle('sign_up')">{{ sign_txt }}<i class="iconfont icon-xia"
                            :class="{ 'icon-up': sign_up_flag }"></i>
                        <div class="select-float" v-if="sign_up_flag">
                            <span v-for="item in sign_up_list" :key="item.stauts" @click.stop="change(item, 'sign_up')"
                                :class="{ 'select-current': item.status == sign_up_status }">{{ item.txt }}</span>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="tips" v-if="comment_list.length <= 0">
                    <img :src="img_url" style="width: 7.1875rem;height: 7.1875rem;margin: 3.5625rem auto 0.2188rem;"
                        alt="">
                    <div style="font-size: .75rem;color: #8E8E95;">暂无评论</div>
                </div>
                <div class="comment-box">
                    <span v-for="item in comment_list" :class="{ 'comment-current': item.status == comment_status }"
                        @click="change(item, 'comment')">{{ item.txt }}</span>
                </div>
                <div class="comment-content">
                    <div class="comment-item" v-for="item in comment_list_details" :key="item.id">
                        <div class="comment-head">
                            <span>{{ item.created_at }}</span>
                            <span :class="item.is_public ? 'public' : 'public-pass'">{{ item.is_public == 1 ? '通过' :
                                '未通过'
                                }}</span>
                        </div>
                        <div class="comment-title">{{ item.content }}</div>
                        <div class="flex-center" style="line-height: 1;">
                            <span class="time">评分：</span>
                            <div class="flex-center">
                                <i v-for="c_item in 5"
                                    :class="c_item <= item.score ? 'iconfont icon-fontclass-pingfen current' : 'iconfont icon-fontclass-pingfen'"></i>
                            </div>
                        </div>
                        <div class="comment-goods">
                            <img :src="item.product.main_images[0]" />
                            <div class="comment-goods-title">{{ item.product.name }}</div>
                        </div>
                        <div class="comment-button" @click="goto('kaipin_comment_details', item.id)">查看评论</div>
                    </div>
                </div>
            </template>
        </div>
        <div v-if="active == 0" class="goods-box"
            :class="{ 'z-index-30': select_flag || earnest_money_flag || sign_up_flag }">

            <div class="goods" v-for="item in list" :key="item.id">
                <div class="goods-head">
                    <span>{{ item.created_at }}</span>
                    <span :style="item.status == 0 ? 'color:#F96D20' : ''">{{ item.status_name }}</span>
                </div>
                <div class="goods-center">
                    <div class="goods-center-left">
                        <img :src="item.product.main_images[0]" />
                        <div class="goods-status-tips">{{ item.product.status_name }}</div>
                    </div>
                    <div style="text-align: left;font-size: .8125rem;">
                        <div class="goods-title">{{ item.product.name }}</div>
                        <div>参与数量：{{ item.number }}</div>
                        <div style="margin-bottom: .375rem;margin-top: .4063rem;">
                            <span>保证金金额：</span>
                            <span class="bold">¥{{ item.margin }}</span>
                            <span class="goods-status">{{ item.margin_status_name }}</span>
                        </div>
                    </div>
                </div>
                <div class="comment-button" @click="goto('kaipin_publish_comment', item.product_id)">评论</div>
            </div>
        </div>

        <div class="page-bg-opactiy" v-if="select_flag || earnest_money_flag || sign_up_flag"></div>




        <div class="footer"
            :class="{ 'z-index-30': select_flag || earnest_money_flag || sign_up_flag, 'pc-style': fun.isPc() }">
            <div class="footer-item" @click="goto('kaipinLaboratory')">
                <i class="iconfont icon-shangpin1"></i>
                <span>开品广场</span>
            </div>
            <div class="footer-item">
                <i class="iconfont icon-wodecangpin" style="color: var(--themeBaseColor);"></i>
                <span>我的开品</span>
            </div>
        </div>
    </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
    mixins: [scrollMixin],
    data() {
        return {
            img_url: "",
            my_product_count: 0,
            my_comment_count: 0,
            comment_status: 3,
            sign_up_flag: false,
            earnest_money_flag: false,
            active: 0,
            keyword: "",
            list: [],
            isLoadMore: true,
            page: 1,
            total_page: 0,
            select_flag: false,
            open_status: null,
            earnest_money_status: null,
            sign_up_status: null,
            sign_txt: "报名状态",
            open_text: "开品状态",
            open_list: [
                { txt: "全部", status: 99 },
                { txt: "待出品", status: 0 },
                { txt: "已出品", status: 1 },
                { txt: "出品中", status: 2 },
                { txt: "已完成", status: 3 },
                { txt: "开品失败", status: -1 },
            ],
            earnest_money_list: [
                { txt: "全部", status: 99 },
                { txt: "待缴纳", status: 0 },
                { txt: "已缴纳", status: 1 },
                { txt: "已退还", status: -1 },

            ],
            sign_up_list: [
                { txt: "全部", status: 99 },
                { txt: "待通过", status: 0 },
                { txt: "已通过", status: 1 },
                { txt: "已取消", status: -1 },

            ],

            earnest_money_txt: "保证金状态",
            inner_width: 0,
            comment_list: [
                { txt: '全部', status: 3 },
                { txt: '通过', status: 1 },
                { txt: '未通过', status: 0 }
            ],
            member: {},
            comment_list_details: []

        }
    },
    activated() {
        this.init();
        this.getData();
    },
    methods: {
        init() {
            this.keyword = '';
            this.my_product_count = 0;
            this.my_comment_count = 0;
            this.comment_status = 3;
            this.active = 0;
            this.sign_up_flag = false;
            this.select_flag = false;
            this.earnest_money_flag = false;
            this.open_text = "开品状态";
            this.sign_txt = "报名状态";
            this.earnest_money_txt = "保证金状态";
            this.open_status = null;
            this.earnest_money_status = null;
            this.sign_up_status = null;
            this.img_url = window.location.origin + '/static/local/kaipin-laboratory/empty.png'
            this.inner_width = window.innerWidth + 'px';
            this.isLoadMore = true;
        },
        getData(page = 1) {
            let json = {
                page,
                product_status: this.open_status==99?'':this.open_status,
                margin_status: this.earnest_money_status==99?'': this.earnest_money_status,
                status: this.sign_up_status==99?'':this.sign_up_status,
                product_name: this.keyword
            }
            $http.post("plugin.kaipin-laboratory.frontend.product-plaza.get-product-log", json, '').then(({ result, msg, data }) => {
                if (result) {
                    console.log(data);
                    this.my_product_count = data.my_product_count;
                    this.my_comment_count = data.my_comment_count;
                    this.list = page == 1 ? data.data : this.list.concat(data.data);
                    this.page = data.current_page;
                    this.total_page = data.last_page;
                    this.member = data.member;
                } else {
                    this.$toast(msg);
                }
            })
        },
        change(data, type) {
            if (type == 'money') {
                this.earnest_money_txt = data.txt;
                this.earnest_money_status = data.status;
                this.earnest_money_flag = false;
                this.getData();
            } else if (type == 'select') {
                this.open_text = data.txt;
                this.open_status = data.status;
                this.select_flag = false;
                this.getData();
            } else if (type == 'comment') {
                this.comment_status = data.status;
                this.get_comment_list();
            } else {
                this.sign_txt = data.txt;
                this.sign_up_status = data.status;
                this.sign_up_flag = false;
                this.getData();
            }
        },
        tab_click(name) {
            if (name == 1) {
                this.select_flag = false;
                this.earnest_money_flag = false;
                this.sign_up_flag = false;
                this.get_comment_list();
            } else {
                this.getData();
            }
        },
        get_comment_list(page = 1) {
            let json = { page }
            if (this.comment_status !== 3) {
                json.is_public = this.comment_status;
            }
            $http.post("plugin.kaipin-laboratory.frontend.product-plaza.get-my-comment", json, '').then(({ result, msg, data }) => {
                if (result) {
                    this.comment_list_details = page == 1 ? data.data : this.comment_list_details.concat(data.data);
                    this.page = data.current_page;
                    this.total_page = data.last_page;
                }
            })
        },
        select_handle(type) {
            if (type == 'select') {
                this.earnest_money_flag = false;
                this.sign_up_flag = false;
                this.select_flag = !this.select_flag;
            } else if (type == 'earnest_money') {
                this.select_flag = false;
                this.sign_up_flag = false;
                this.earnest_money_flag = !this.earnest_money_flag;
            } else {
                this.earnest_money_flag = false;
                this.select_flag = false;
                this.sign_up_flag = !this.sign_up_flag;
            }
        },
        goto(url, id) {
            if (id) {
                this.$router.push(this.fun.getUrl(url, { id }))
                return
            }
            this.$router.push(this.fun.getUrl(url))
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            if (this.active == 1) {
                this.get_comment_list(page);
            } else {
                this.getData(page);

            }
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__line {
    background-color: var(--themeBaseColor);
}

.relative {
    position: relative !important;
}

.pc-style {
    width: 375px !important;
    left: 50% !important;
    z-index: 100 !important;
    transform: translateX(-50%);
}

.public {
    color: #23B43B;
    font-size: 0.8125rem;
}

.public-pass {
    color: #00001C;
    font-size: 0.8125rem;
}

.page-bg-opactiy {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    opacity: 0.5;
    background-color: #000;
}

::v-deep .van-tabs__line {
    bottom: 20px;
}

::v-deep .van-tabs__nav {
    background: transparent;
}

.opactiy {
    opacity: 0.5;
}

.kaipin-my {
    padding-bottom: 3.0625rem;
    min-height: 100vh;

    .goods-center-left {
        position: relative;
    }

    .goods-status-tips {
        position: absolute;
        top: 0;
        left: 0;
        width: max-content;
        text-align: center;
        line-height: 1.125rem;
        height: 1.125rem;
        color: #fff;
        border-radius: 0.5rem 0px 0.5rem 0px;
        padding: 0 0.3438rem;
        overflow: hidden;
        font-size: .6875rem;
        z-index: 1;
    }

    .goods-status-tips::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        z-index: -1;
        height: 1.125rem;
        background: #171717;
        opacity: 0.7;

    }

    // .bg-opactiy {
    //     position: relative;
    //     height: 100%;

    //     &::after {
    //         content: "";
    //         position: absolute;
    //         left: 0;
    //         right: 0;
    //         top: 0;
    //         bottom: 0;
    //         z-index: 100;
    //         opacity: 0.5;
    //         background-color: #000;
    //     }
    // }

    .comment-content {
        .comment-item:first-child {
            margin-top: .875rem;
        }
    }

    .current {
        color: var(--themeBaseColor) !important;
    }

    .comment-item::after {
        content: "";
        display: table;
        clear: both;
    }

    .comment-button {
        width: 5.125rem;
        height: 2rem;
        line-height: 2rem;
        background: #FFFFFF;
        border-radius: 1rem 1rem 1rem 1rem;
        border: 0.0313rem solid #AAAAB3;
        font-weight: 500;
        font-size: 0.875rem;
        color: #00001C;
        float: right;

    }

    .comment-goods {
        height: 2.5rem;
        line-height: 2.5rem;
        background: #F5F5F5;
        border-radius: 0.5rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-top: .9375rem;
        margin-bottom: .75rem;
        justify-content: baseline;

        img {
            margin: 0;
            width: 2.5rem;
            height: 2.5rem;
            background: #F6F6F6;
            border-radius: 0.5rem;
        }
    }

    .comment-goods-title {
        margin-left: .5rem;
        font-weight: 500;
        font-size: 0.8125rem;
        color: #00001C;
    }

    .icon-fontclass-pingfen {
        font-size: 0.6875rem;
        color: #D6D6DC;
        margin-right: .0938rem;
    }

    .comment-title {
        font-weight: bold;
        font-size: 0.875rem;
        color: #00001C;
        text-align: left;
        margin-bottom: .5313rem;
    }

    .comment-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 0.8125rem;
        line-height: 1;
        margin-bottom: .9375rem;
        color: #00001C;
    }

    .comment-item {
        margin: .625rem .75rem;
        background-color: #fff;
        border-radius: .625rem;
        padding: .75rem;
    }

    .comment-current {
        position: relative;
        border: 1px solid var(--themeBaseColor) !important;
        overflow: hidden;
        color: var(--themeBaseColor) !important;
    }

    .comment-current::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--themeBaseColor);
        opacity: 0.3;
    }

    .comment-box {
        display: flex;
        align-items: center;
        padding-left: .75rem;


        span {
            padding: .4688rem .9375rem;
            background-color: #F5F5F5;
            border: 1px solid #F5F5F5;
            color: #454545;
            box-sizing: border-box;
            line-height: 1;
            font-size: .8125rem;
            border-radius: 1.0938rem;
            margin-right: .5rem;
        }
    }

    .bold {
        font-weight: bold;
    }

    .z-index-30 {
        z-index: 30 !important;
    }

    .goods-box {
        position: relative;
        z-index: 100;

        .goods::after {
            display: table;
            content: "";
            clear: both;
        }

        .goods:first-child {
            margin: 0.0625rem 0.75rem 0.625rem !important;
        }
    }

    .goods-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #00001C;
        line-height: 1;
        font-size: .8125rem;
    }

    .goods-status {
        padding: .1563rem .25rem;
        text-align: center;
        font-size: .6875rem;
        background: #FFF0E8;
        border-radius: 0.25rem;
        margin-left: .25rem;
        color: #F96D20;
    }

    .goods-title {
        font-weight: bold;
        font-size: 0.875rem;
        margin-top: 0.5625rem;
        color: #00001C;
        margin-bottom: 1.1563rem;
    }

    .goods-center {
        margin-top: .75rem;
        display: flex;
        line-height: 1;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: .25rem;
    }

    .goods {
        background-color: #fff;
        border-radius: 0.625rem;
        margin: 0.625rem 0.75rem;
        padding: .75rem;

        img {
            width: 5rem;
            height: 5rem;
            margin: 0 0.5rem 0 0;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        }
    }

    .icon-up {
        will-change: transform;
        font-size: 1rem;
        transform: rotateX(180deg);
    }

    .icon-xia {
        will-change: transform;
        color: #AAAAB3;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .select {
        pointer-events: auto;
        // position: relative;
        // z-index: 10;
    }

    .select-current {
        color: var(--themeBaseColor) !important;
    }

    .select-float {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        display: flex;
        flex-direction: column;
        align-items: baseline;
        background-color: #fff;
        border-radius: 0px 0px 0.625rem 0.625rem;
        overflow: hidden;
        z-index: 120;

        span:first-child {
            padding-top: 1.3125rem;
        }

        span:last-child {
            padding-bottom: 1.375rem;
        }

        span {
            font-size: .8125rem;
            width: 100%;
            text-align: left;
            color: #00001C;
            padding-top: 1.25rem;
            padding-left: .75rem;
            line-height: 1;
            z-index: 60;
            // flex: 1;
        }
    }

    .select-float-1 {
        position: fixed;
        top: 13.0625rem;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        height: max-content;
        flex-direction: column;
        align-items: baseline;
        background-color: #fff;
        border-radius: 0px 0px 0.625rem 0.625rem;
        overflow: hidden;
    }

    .select-box {
        line-height: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8125rem;
        color: #454545;
        padding: .75rem 1.9375rem;
    }

    .input-box {
        padding: 0 .75rem;
    }

    .my-input {
        // display: block;
        // width: 100%;
        // border:none;
        height: 2rem !important;
        // padding: .625rem 2.125rem;
        line-height: 2rem;
        border-radius: 1.0938rem !important;
        background-color: #F5F5F5 !important;
        box-sizing: border-box;
    }

    .content {
        position: relative;
        margin-top: -3.3125rem;
        width: 100vw;
        border-radius: 1.25rem 1.25rem 0 0;
        z-index: 80;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 9.375rem;
            z-index: -1;
            background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
            border-radius: 1.25rem 1.25rem 0 0;
        }
    }

    .head-info {
        display: flex;
        flex-direction: column;
    }

    .icon-zx_map_tel {
        display: inline-block;
        position: relative;
        margin-right: 0.3125rem;
        width: 1.125rem;
        height: 1.125rem;
        line-height: 1.125rem;
        z-index: 1;
        font-size: 0.5625rem !important;
        color: #FFFFFF;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
            background: #FFFFFF;
            opacity: 0.3;
            border-radius: 50%;
        }
    }

    .phone {
        display: flex;
        font-weight: 400;
        text-align: left;
        font-size: 0.8125rem;
        color: #FFFFFF;
        align-items: center;
    }

    .nick-name {
        font-weight: bold;
        font-size: 0.9375rem;
        text-align: left;
        color: #FFFFFF;
        line-height: 1;
        margin-bottom: .3438rem;
    }


    .head {
        display: flex;
        width: 23.4375rem;
        height: 8.9375rem;
        background: var(--themeBaseColor);
        padding-top: 1.25rem;
        z-index: 60;
        position: relative;
        padding-left: .9063rem;

        img {
            object-fit: fill;
            margin: 0 0.5938rem 0 0;
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
            border: 1.0016px solid #fff;
        }
    }

    .head-box {
        display: flex;
        align-items: center;
        height: fit-content;
    }

    .footer {
        position: fixed;
        bottom: 0;
        height: 3.0625rem;
        left: 0;
        right: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 56;
    }

    .footer-item {
        font-size: .625rem;
        color: #00001C;
        display: flex;
        flex-direction: column;
        justify-content: center;

        i {
            font-size: 1.25rem;
        }
    }

    .line-hegith-1 {
        line-height: 1;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }


}
</style>